<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <title>帮助中心</title>
  <!-- title图标 -->
  <link rel="shortcut icon" type="image/x-icon" href="public/images/huobi.png" />
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="public/css/bootstrap.min.css" rel="stylesheet" />
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="public/js/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 样式表-->
  <link href="public/css/index.css" rel="stylesheet">
  <link href="public/css/request.css" rel="stylesheet">
  <!-- 推送插件 -->
  <link href="public/css/toastr.min.css" rel="stylesheet">
  <!-- js文件 -->
  <script src="public/js/hc_enduser.js"></script>
  <script src="public/js/script.js"></script>
  <script src="public/js/snippet.js"></script>
  <script src="public/js/jquery.min.js"></script>
  <!-- 推送插件 -->
  <script src="public/js/toastr.min.js"></script>
  <!-- Vue的配置 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
  <script src="public/js/stocket.js"></script>
  <script>
    var ws;
    $(function () {
      socket();
      })
  

function socket() {
    ws = new WebSocket('ws://192.168.137.1:5001/ws');
    ws.onopen = function () {
        //AddPut(text);
        // ws.send("hello");
    }
    ws.onmessage = function (evt) {
        toastr.options = {
 
            closeButton: false,
            debug: false,
            progressBar: false,
            positionClass: "toast-top-right",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "5000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        var $toast = toastr['info']('您有一条新信息', evt.data);
    }
    ws.onerror = function (evt) {
    }
    ws.onclose = function () {
    }
}
$('#close').click(function () {
    ws.close();
});
  </script>
</head>

<body>
  <!-- 头部 -->
  <div class="row clearfix">
    <div class="col-md-12 column">
      <header class="header">
        <!--logo图片-->
        <div class="logo">
          <img src="public/images/logo.png" />
        </div>
        <!-- 提交请求 -->
        <div class="nav-wrapper">
          <span class="icon-menu"></span>
          <nav class="user-nav" id="user-nav">
            <a class="submit-a-request" href="SubmitRequests.html">提交请求</a>
          </nav>
        </div>
      </header>
    </div>
    <!-- 搜索框 -->
    <div class="row clearfix">
      <div class="col-md-12 column">
        <section class="section hero">
          <div class="hero-inner">
            <div role="search" class="search search-full" data-search="" data-instant="true" autocomplete="off">
              <input name="" type="hidden" value="">
              <input type="search" name="" id="query" autocomplete="off" placeholder="搜索" aria-label="搜索">
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- 中间主体内容部分 -->
    <main role="main">
      <div class="container">
        <section class="section knowledge-base">
          <section class="categories blocks" id="Notice">
            <ul class="blocks-list">
              <!-- Huobi Global 公告 -->
              <li class="blocks-item" v-for="site in datas">
                <a class="blocks-item-link " onclick="parent(this)" v-bind:name="site.parentid" href="HuobiNotice.html">
                  <h4 class="blocks-item-title">{{site.pname}}</h4>
                  <p class="blocks-item-description"></p>
                </a>
              </li>
            </ul>
          </section>
          <!-- 文章部分的内容 -->
          <section class="articles" id="Article">
            <h3>被推荐的文章</h3>
            <ul class="article-list promoted-articles">
              <li class="promoted-articles-item" v-for="site in datas">
                <a onclick="artic(this)" v-bind:name="site.categoryId" v-bind:id="site.articleid" href="article.html">
                  {{site.title}}
                </a>
              </li>
            </ul>
          </section>
        </section>
      </div>
    </main>
    <!-- 活动部分的内容 -->
    <div class="container">
      <section class="section activity">
        <div class="recent-activity" id="activity">
          <h2 class="recent-activity-header">最近的活动</h2>
          <ul class="recent-activity-list" v-for="site in datas" id="uls">
            <li class="recent-activity-item">
              <a class="recent-activity-item-parent" onclick="category(this)" v-bind:name="site.categoryId"
                href="important.html">{{site.cname}}</a>
              <a class="recent-activity-item-link" onclick="artic(this)" v-bind:name="site.categoryId"
                v-bind:id="site.articleid" href="article.html">{{site.title}}</a>
              <div class="recent-activity-item-meta">
                <div class="recent-activity-item-time">{{site.date}}</div>
                <div class="recent-activity-item-comment"><span>{{site.comNum}}</span></div>
              </div>
            </li>
          </ul>
          <div class="recent-activity-controls">
            <a href="javascript:void(0)" @click="SeeMore">查看更多</a>
          </div>
        </div>
      </section>
    </div>
    <!-- 底部内容 -->
    <footer class="footer">
      <div class="footer-inner">
        <a title="主页" href="#">帮助中心</a>
        <!-- 语言内容 -->
        <div class="footer-language-selector">
          <div class="dropdown language-selector" aria-haspopup="true">
            <div class="row clearfix">
              <div class="col-md-12 column">
                <div class="btn-group dropup">
                  <a class="yuyan" data-toggle="dropdown" style="color:#4f6d8c ;border: none">简体中文<img
                      src="public/images/xiangxia.svg" /></a>
                  <ul class="dropdown-menu" style="margin-left: -50px;">
                    <li>
                      <a href="#"> Deutsch</a>
                    </li>
                    <li>
                      <a href="#"> English (US)</a>
                    </li>
                    <li>
                      <a href="#">Español</a>
                    </li>
                    <li>
                      <a href="#"> Français</a>
                    </li>
                    <li>
                      <a href="#">日本語</a>
                    </li>
                    <li>
                      <a href="#">한국어</a>
                    </li>
                    <li>
                      <a href="#">Português</a>
                    </li>
                    <li>
                      <a href="#"> Русский</a>
                    </li>
                    <li>
                      <a href="#"> Türkçe</a>
                    </li>
                    <li>
                      <a href="#">Tiếng Việt</a>
                    </li>
                    <li>
                      <a href="#">繁體中文</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- js代码 -->
    <script type="text/javascript">
      var number = 5; //全局变量初始值为5
      $(function () {
        // 公告的方法
        notice();
        //调用文章的方法
        article();
        //调用最近活动的方法
        activity(number);
      });

      // 公告ajax
      function notice() {
        $.ajax({
          url: "http://192.168.137.1:5001/api/values/Parent",
          type: "post",
          dataType: "json",
          success: function (result) {
            new Vue({
              el: "#Notice",
              data: {
                datas: result
              }
            })
          },
          error: function () {
            // alert("执行失败！");
          }
        })
      }
      //  推荐文章ajax
      function article() {
        $.ajax({
          url: "http://192.168.137.1:5001/api/values/GetCommArticle",
          type: "post",
          dataType: "json",
          success: function (result) {
            console.log(result);
            new Vue({
              el: "#Article",
              data: {
                datas: result
              }
            })
          },
          error: function () {
            // alert("执行失败");
          }
        })
      }
      //最近活动ajax
      function activity(num) {
        $.ajax({
          url: "http://192.168.137.1:5001/api/values/LatelyAativity?num=" + num,
          type: "post",
          dataType: "json",
          success: function (result) {
            new Vue({
              el: "#activity",
              data: {
                datas: result
              },
              methods: {
                SeeMore() {
                  number = number + 5;
                  $.ajax({
                    url: "http://192.168.137.1:5001/api/values/LatelyAativity?num=" + number,
                    type: "post",
                    dataType: "json",
                    success: (result) => {
                      this.datas = result;
                    },
                    error: function () {
                      // alert("执行失败！");
                    }
                  });
                }
              }
            })
          },
          error: function () {
            // alert("执行失败！");
          }
        })
      }
      //查看更多点击事件
      function chakan() {
        number = number + 5;
        $.ajax({
          url: "http://192.168.137.1:5001/api/values/LatelyAativity?num=" + number,
          type: "post",
          dataType: "json",
          success: function (result) {
            new Vue({
              el: "#activity",
              data: {
                datas: result
              }
            })
            console.log(result);
            console.log(this.data);
          },
          error: function () {
            // alert("执行失败");
          }
        });
      }
      // 根据获得的id跳转(八大模块)
      function parent(params) {
        //存储的是id的数据
        var str = $(params).attr("name");
        var name = params.children[0].innerText;
        //id是参数的名字
        window.localStorage.setItem("id", str);
        window.localStorage.setItem("parentname", name);
      }
      //根据栏目（最近活动cname连进去）
      function category(params) {
        var strs = $(params).attr("name");
        var names = params.innerText;
        //id是参数的名字
        window.localStorage.setItem("Categoryid", strs);
        window.localStorage.setItem("cname", names);
      }
      //根据文章（最近活动文章连进去）
      function artic(params) {
        var strs = $(params).attr("id");
        var categrayid = $(params).attr("name");
        var names = params.innerText;
        window.localStorage.setItem("articleid", strs);
        window.localStorage.setItem("title", names);
        window.localStorage.setItem("Categoryid", categrayid);
      }


      var query; //定义全局变量
      // 搜索enter键按下事件
      $('#query').keydown(function () {
        if (event.keyCode == "13") {
          //获取文本框里面的值
          query = $("#query").val();
          location.href = "search.html#" + query;

        }
      })
    </script>
</body>

</html>